<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>天猫国际商城</title>
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
<style>
	/*滚动条整体宽度*/
	.scrollcontainer_auto::-webkit-scrollbar{
		width: 5px; /*宽对应滚动条的尺寸*/
  		background-color: rgba(0,0,0,0);	   

	}
	/*轨道*/
	.scrollcontainer_auto::-webkit-scrollbar-track{
		box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
		border-radius: 5px;
		background-color: rgba(255,255,255,0.8); 

	}
	/*滑块*/
	.scrollcontainer_auto::-webkit-scrollbar-thumb{
		border-radius: 5px;
		box-shadow: inset 0 0 5px rgba(0,0,0,.3);
		background-color: #555;
	}
</style>

<!-- /*页面最顶部------开始*/ -->
		<div class="pagetop">
			<div class="pagetop-content">
				<p>汪，欢迎来天猫
					<a href="login.html" target="_Blank">请登录</a>
					<a href="register.html" target="_Blank">免费注册</a>
				</p>
				<ul>
					<li><a href="#"><i class="iconfont icon-liebiao"></i>网站导航</a></li>
					<li><a href="#">商家支持</a></li>
					<li><a href="#">淘宝网</a></li>
					<li><a href="#"><i class="iconfont icon-shouji"></i>手机版</a></li>
					<li><a href="#">收藏夹</a></li>
					<li><a href="cart.html"><i class="iconfont icon-gouwuchexuanzhong"></i>购物车</a></li>
					<li><a href="#">我的淘宝</a></li>
				</ul>
			</div>
		</div>
<!-- /*页面最顶部------结束*/ -->
<!-- 左侧 -->
<div class="dingbu">
    <div id="dbbox">
        <div class="dbzbox">
            <img src="images/head-logo.png">
        </div>
        <div class="dbybox">
            <input type="text" value="多能酷睿新品  开启游戏办公新时代">
            <button>搜索</button>
        </div>
    </div>
</div>
<div class="zuoce">
	<li>狂暑季节</li>
    <li>天猫超市</li>
    <li>天猫国际</li>
    <li>猜你喜欢</li>
    <li>顶部</li>
</div>

<!-- /*页面头部搜索部分-------开始*/ -->
		<div class="head-search">
			<div class="head-search-content">
				<div class="Logo"><img src="images/head-logo.png"></div>
				<div class="search">
					<form method="get">
						<div class="searct-text">
							<input type="text" placeholder="搜索 天猫 商品/品牌/店铺">
						</div>
						<div class="search-submit">
							<input type="submit" value="搜 索" >
						</div>
					</form>
					<ul>
						<li><a href="shopList.html">针织衫</a></li>
						<li><a href="shopList.html">连衣裙</a></li>
						<li><a href="shopList.html">四件套</a></li>
						<li><a href="shopList.html">摄像头</a></li>
						<li><a href="shopList.html">客厅灯</a></li>
						<li><a href="shopList.html">口红</a></li>
						<li><a href="shopList.html">手机</a></li>
						<li><a href="shopList.html">运动鞋</a></li>
						<li><a href="shopList.html">牛奶</a></li>
					</ul>
				</div>
			</div>
		</div>
<!-- /*页面头部搜索部分-------结束*/ -->

<!-- 主体导航---------开始 -->
<div class="main-nav" >

<!-- 导航主体内容    开始 -->
	<div class="main-nav-content" style="z-index: 100;">



	<!-- 二级菜单导航栏 头部 --------------开始------- -->
		<div class="Sec-nav">
			<div class="title">
				<img src="images/Sec-nav-title-logo.png">
				<b>商品分类</b>
			</div>

			<div class="Sec-nav-main">
				<ul class="ul-One scrollcontainer_auto">
					<li class="li-One">
						<i class="iconfont icon-nvzhuangneiyi red"></i>
						<span><a href="#" class="red">女装</a>/<a href="#" class="red">内衣</a></span>
					</li>
				</ul>
			</div>	
		</div>
	<!-- 二级菜单导航栏 头部 --------------结束------- -->


		<!-- 导航最右边-------开始 -->
		<div style="clear: both;"></div>
				<div class="main-nav-right-content">
					<ul>
						<li><a href="#"><img src="images/天猫超市.png"></a></li>
						<li><a href="#"><img src="images/天猫国际.png"></a></li>
						<li><a href="shopList.html">天猫会员</a></li>
						<li><a href="shopList.html">电器商城</a></li>
						<li><a href="shopList.html">汪鲜生</a></li>
						<li><a href="shopList.html">医药馆</a></li>
						<li><a href="shopList.html">营业厅</a></li>
						<li><a href="shopList.html">魅力惠</a></li>
						<li><a href="shopList.html">飞猪旅行</a></li>
						<li><a href="shopList.html">苏宁易购</a></li>
					</ul>
				</div>
		<div style="clear: both;"></div>
		<!-- 导航最右边-------结束 -->



	</div>
<!-- 导航主体内容    结束 -->
</div>
<!-- 主体导航---------结束 -->

<!-- 页面banner 图片轮播--------开始 -->
<div class="banner">
	<div class="banner-box">
		<a href="#"><img src="images/banner-1.jpg" id="BannerImg" width="1230px" height="500px"></a>
	</div>

	<div class="banner-item">
		<ul>
			<li data-path="0"><a href="#"></a></li>
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
		</ul>
	</div>
</div>
<!-- 页面banner 图片轮播--------结束 -->
						<div style="clear: both;"></div>

<!-- 主体内容开始 -->
<div class="main">
	<!-- 狂暑季--------------开始   -->
	<div class="item-One">
		<div class="One-title"><img src="images/狂暑季.png"></div>
		<div class="One-content">
			<ul>
				<li><a href="#"><img src="images/One-1.png"></a></li>
				<li><a href="#"><img src="images/One-2.png"></a></li>
				<li><a href="#"><img src="images/One-3.png"></a></li>
				<li><a href="#"><img src="images/One-4.png"></a></li>
				<li><a href="#"><img src="images/One-5.png"></a></li>
			</ul>
		</div>
	</div>
	<!-- 狂暑季--------------结束   -->
										<div style="clear: both;"></div>

	<!--  所有品牌链接图标   -----------开始  -->
	<div class="item-Three">
		<ul>
			<li>
				<div class="img"><img src="images/shop-1.png"></div>
				<a href="#">
					<div class="link">
						<p>ANTA/安踏</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>

			<li>
				<div class="img"><img src="images/shop-2.png"></div>
				<a href="#">
					<div class="link">
						<p>新湖</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>

			<li>
				<div class="img"><img src="images/shop-3.png"></div>
				<a href="#">
					<div class="link">
						<p>ANGEL/安琪</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>

			<li>
				<div class="img"><img src="images/shop-4.png"></div>
				<a href="#">
					<div class="link">
						<p>T</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>

			<li>
				<div class="img"><img src="images/shop-5.png"></div>
				<a href="#">
					<div class="link">
						<p>belulu</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>

			<li>
				<div class="img"><img src="images/shop-6.png"></div>
				<a href="#">
					<div class="link">
						<p>Sefon/臣枫</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>

			<li>
				<div class="img"><img src="images/shop-7.png"></div>
				<a href="#">
					<div class="link">
						<p>EVE   ‘NY/伊芙心悦</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>

			<li>
				<div class="img"><img src="images/shop-8.png"></div>
				<a href="#">
					<div class="link">
						<p>SUSONGETH/首...</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>

			<li>
				<div class="img"><img src="images/shop-9.png"></div>
				<a href="#">
					<div class="link">
						<p>喜马拉雅好声音</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>

			<li>
				<div class="img"><img src="images/shop-10.png"></div>
				<a href="#">
					<div class="link">
						<p>Schneider Ele...</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>

			<!-- 第二行 -->

						<li>
				<div class="img"><img src="images/shop-1.png"></div>
				<a href="#">
					<div class="link">
						<p>ANTA/安踏</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>

			<li>
				<div class="img"><img src="images/shop-2.png"></div>
				<a href="#">
					<div class="link">
						<p>新湖</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>

			<li>
				<div class="img"><img src="images/shop-3.png"></div>
				<a href="#">
					<div class="link">
						<p>ANGEL/安琪</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>

			<li>
				<div class="img"><img src="images/shop-4.png"></div>
				<a href="#">
					<div class="link">
						<p>T</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>

			<li>
				<div class="img"><img src="images/shop-5.png"></div>
				<a href="#">
					<div class="link">
						<p>belulu</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>

			<li>
				<div class="img"><img src="images/shop-6.png"></div>
				<a href="#">
					<div class="link">
						<p>Sefon/臣枫</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>

			<li>
				<div class="img"><img src="images/shop-7.png"></div>
				<a href="#">
					<div class="link">
						<p>EVE   ‘NY/伊芙心悦</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>

			<li>
				<div class="img"><img src="images/shop-8.png"></div>
				<a href="#">
					<div class="link">
						<p>SUSONGETH/首...</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>

			<li>
				<div class="img"><img src="images/shop-9.png"></div>
				<a href="#">
					<div class="link">
						<p>喜马拉雅好声音</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>

			<li>
				<div class="img"><img src="images/shop-10.png"></div>
				<a href="#">
					<div class="link">
						<p>Schneider Ele...</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>


			<!-- 第三行 -->

						<li>
				<div class="img"><img src="images/shop-1.png"></div>
				<a href="#">
					<div class="link">
						<p>ANTA/安踏</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>

			<li>
				<div class="img"><img src="images/shop-2.png"></div>
				<a href="#">
					<div class="link">
						<p>新湖</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>

			<li>
				<div class="img"><img src="images/shop-3.png"></div>
				<a href="#">
					<div class="link">
						<p>ANGEL/安琪</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>

			<li>
				<div class="img"><img src="images/shop-4.png"></div>
				<a href="#">
					<div class="link">
						<p>T</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>

			<li>
				<div class="img"><img src="images/shop-5.png"></div>
				<a href="#">
					<div class="link">
						<p>belulu</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>

			<li>
				<div class="img"><img src="images/shop-6.png"></div>
				<a href="#">
					<div class="link">
						<p>Sefon/臣枫</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>

			<li>
				<div class="img"><img src="images/shop-7.png"></div>
				<a href="#">
					<div class="link">
						<p>EVE   ‘NY/伊芙心悦</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>

			<li>
				<div class="img"><img src="images/shop-8.png"></div>
				<a href="#">
					<div class="link">
						<p>SUSONGETH/首...</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>

			<li>
				<div class="img"><img src="images/shop-9.png"></div>
				<a href="#">
					<div class="link">
						<p>喜马拉雅好声音</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>

			<li>
				<div class="img"><img src="images/shop-10.png"></div>
				<a href="#">
					<div class="link">
						<p>Schneider Ele...</p>
						<p>点击进入</p>
					</div>
				</a>
			</li>
		</ul>
	</div>
	<!--  所有品牌链接图标   -----------结束  -->
										<div style="clear: both;"></div>
	<!-- 天猫超市------------开始 -->
	<div class="item-Four">
		<div class="title">
			<img src="images/天猫超市-title.png">
			<ul>
				<li><a href="#">生鲜水果</a></li>
				<li><a href="#">母婴用品</a></li>
				<li><a href="#">家庭清洁</a></li>
				<li><a href="#">家居家电</a></li>
				<li><a href="#">美容洗护</a></li>
				<li><a href="#">粮油副食</a></li>
				<li><a href="#">食品饮料</a></li>
				<li><a href="#">进口食品</a></li>
			</ul>
		</div>
		<div class="left">
			<a href="#"><img src="images/item-Four-left-1.png"></a>
		</div>
		<div class="right">
			<ul>
				<li>
					<div class="first-box">
						<div class="first-box-content">
							<div class="tab-one" id="tab-one">今日疯抢</div>
							<div class="tab-two" id="tab-two">量贩装</div>
							<div class="img" ><a href="#"><img src="images/天猫超市-right-B-2.png" id="tab-img" width="464px" height="227px;"></a></div>
						</div>
					</div>
				</li>

				<!-- <li>
					<div class="Sec-box">
						<a href="#">
							<img src="images/天猫超市-right-2.jpg">
							<p>膜法世家绿豆净白3件套补水保湿控油爽</p>
							<span>￥99.9</span>
						</a>
					</div>
				</li> -->
			</ul>
		</div>
	</div>
	<!-- 天猫超市------------结束 -->
										<div style="clear: both;"></div>
	<!-- 天猫国际------------开始 -->
	<div class="item-Four">
		<div class="title">
			<img src="images/天猫国际-title.png">
			<ul>
				<li><a href="#">迪奥</a></li>
				<li><a href="#">防晒</a></li>
				<li><a href="#">面膜</a></li>
				<li><a href="#">YSL</a></li>
				<li><a href="#">口红</a></li>
			</ul>
		</div>
		<div class="left">
			<div class="left-first-box">
				<a href="#"><img src="images/item-Four-left-2.png"></a>
			</div>
			<div class="left-sec-box">
				<a href="#"><img src="images/item-Four-left-3.png"></a>
			</div>
		</div>
		<div class="right">
			<ul>
				<li>
					<div class="Sec-box">
						<a href="#">
							<img src="images/天猫国际-right-1.jpg">
							<p>膜法世家绿豆净白3件套补水保湿控油爽</p>
							<span>￥99.9</span>
						</a>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<!-- 天猫国际------------结束 -->
										<div style="clear: both;"></div>

	<!-- 猜你喜欢 --------------开始-->
	<div class="guess-You-Like">
		<div class="title">
			<span> </span><i class="iconfont icon-xihuan"></i><b>猜你喜欢</b><span> </span>
		</div>
		<div class="content">
			<ul>
				<!-- <li>
					<div class="You-Likw-item">
						<a href="#">
							<img src="images/天猫国际-right-4.jpg">
							<p>洁婷卫生巾透气双u超薄日夜组合日用洁婷卫生巾透气双u超薄日合日用</p>
							<s>￥159.4</s>
							<span>￥159.4</span>
						</a>
					</div>
				</li> -->
			</ul>

			<div class="main-end"><i class="iconfont icon-end"></i></div>
		</div>
	</div>

	<!-- 猜你喜欢 --------------结束-->
</div>
<!-- 主体内容结束 -->

<!-- 购物车---------开始 -->

	<div class="m-sidebar">
		<div class="cart">
			<i id="end"></i>
			<span><a href="cart.html">购物车</a></span>
		</div>
	</div>
	<div id="msg">已成功加入购物车！</div>

<!-- 购物车---------结束 -->
<!-- 底部用iframe框架引入写好的foot页面 -->
<iframe src="foot.html" frameborder="0" style="width: 100%;height: 280px;"></iframe>

<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./js/utils.js"></script>
<script src="./js/layer/dist/layer.js"></script>
<script src="./js/index.js"></script>

</body>
</html>